<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>我是a.html页面</h1>
    <button class="btn1">点击我跳转到b页面</button>
    <button class="btn2">点击我前进一个历史记录</button>
    <button class="btn3">点击我go一个页面</button>
    <script>
        // 和浏览器历史记录有关操作 ；
        // 操作浏览器的历史记录 前提是: 浏览器有历史记录 ；
        var btn1 = document.querySelector(".btn1");
        btn1.onclick = function () {
            window.location.href = "./b.html";
        }

        // js里所有操作 浏览器历史记录有关的内容 在 window.history 对象里
        // 1.查看浏览器历史记录的页面的个数  window.history.length
        // console.log( window.history.length);

        // 2.前进一个历史记录 ：window.history.forward()
        var btn2 = document.querySelector(".btn2");
        btn2.onclick = function () {
            window.history.forward();
        }

        // 3.后退一个历史记录 ： window.history.back();

        // 4.前进或者回退到指定历史记录 ：window.history.go();
        // go函数里可以接收 数字参数；
        // 第一种 ： 正数 --> 前进历史记录的个数
        // 第二种： 0 ---> 跳转当前页面
        // 第三种 ： 负数 ---> 回退历史记录的个数；
        var btn3 = document.querySelector(".btn3");
        btn3.onclick = function () {
            // window.history.go(0); // 刷新 
            window.history.go(2);

        }




    </script>
</body>

</html>